<template>
  <div class=" p-20px" >
    <div class="filter-section">
      <el-input style="width: 260px" v-model="filter.agencyId" placeholder="合作编号"
                clearable></el-input>
      <el-date-picker type="datetime" v-model="filter.startTime" value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="开始时间"/>
      <el-date-picker style="margin-left: 20px" type="datetime" v-model="filter.endTime"
                      value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"/>
      <el-button style="margin-left: 20px" type="primary" @click="fetchData()">查询</el-button>
    </div>

    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="总览" name="total"></el-tab-pane>
      <el-tab-pane label="业务收支详情" name="detail"></el-tab-pane>
    </el-tabs>

    <div v-if="activeTab=='total'">
      <el-row>
        <el-col :span="24">
          <el-card header="总收支">
            <el-row>
              <el-col :span="4">
                <el-statistic title="总收入" :value="getStaticValue(statisticData.totalIncome)"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1收入"
                              :value="getStaticValue(statisticData.totalIncomeMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2收入"
                              :value="getStaticValue(statisticData.totalIncomeMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户收入"
                              :value="getStaticValue(statisticData.totalIncomeMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信收入"
                              :value="getStaticValue(statisticData.totalIncomeMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总支出" :value="statisticData.totalExpenditure"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1支出"
                              :value="getStaticValue(statisticData.totalExpenditureMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2支出"
                              :value="getStaticValue(statisticData.totalExpenditureMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户支出"
                              :value="getStaticValue(statisticData.totalExpenditureMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信支出"
                              :value="getStaticValue(statisticData.totalExpenditureMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总利润" :value="statisticData.totalProfit"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1结余"
                              :value="getStaticValue(statisticData.walletBalance?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2结余"
                              :value="getStaticValue(statisticData.walletBalance?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户结余"
                              :value="getStaticValue(statisticData.walletBalance?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信结余"
                              :value="getStaticValue(statisticData.walletBalance?.['微信'])"/>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-card header="业务收支">
            <el-row>
              <el-col :span="4">
                <el-statistic title="总收入" :value="statisticData.totalBusinessIncome"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1收入"
                              :value="getStaticValue(statisticData.businessTotalIncomeMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2收入"
                              :value="getStaticValue(statisticData.businessTotalIncomeMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户收入"
                              :value="getStaticValue(statisticData.businessTotalIncomeMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信收入"
                              :value="getStaticValue(statisticData.businessTotalIncomeMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总支出" :value="statisticData.totalBusinessExpenditure"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1支出"
                              :value="getStaticValue(statisticData.businessTotalExpenditureMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2支出"
                              :value="getStaticValue(statisticData.businessTotalExpenditureMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户支出"
                              :value="getStaticValue(statisticData.businessTotalExpenditureMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信支出"
                              :value="getStaticValue(statisticData.businessTotalExpenditureMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总利润" :value="statisticData.totalBusinessProfit"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1结余"
                              :value="getStaticValue(statisticData.businessWalletBalance?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2结余"
                              :value="getStaticValue(statisticData.businessWalletBalance?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户结余"
                              :value="getStaticValue(statisticData.businessWalletBalance?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信结余"
                              :value="getStaticValue(statisticData.businessWalletBalance?.['微信'])"/>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card header="工作室收支">
            <el-row>
              <el-col :span="4">
                <el-statistic title="总收入" :value="statisticData.totalStudioIncome"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1收入" :value="getStaticValue(statisticData.studioTotalIncomeMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2收入" :value="getStaticValue(statisticData.studioTotalIncomeMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户收入" :value="getStaticValue(statisticData.studioTotalIncomeMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信收入" :value="getStaticValue(statisticData.studioTotalIncomeMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总支出" :value="statisticData.totalStudioExpenditure"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1支出" :value="getStaticValue(statisticData.studioTotalExpenditureMap?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2支出" :value="getStaticValue(statisticData.studioTotalExpenditureMap?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户支出" :value="getStaticValue(statisticData.studioTotalExpenditureMap?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信支出" :value="getStaticValue(statisticData.studioTotalExpenditureMap?.['微信'])"/>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-statistic title="总利润" :value="statisticData.totalStudioProfit"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码1结余" :value="getStaticValue(statisticData.studioWalletBalance?.['铭扬码1'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="铭扬码2结余" :value="getStaticValue(statisticData.studioWalletBalance?.['铭扬码2'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="对公账户结余" :value="getStaticValue(statisticData.studioWalletBalance?.['对公账户'])"/>
              </el-col>
              <el-col :span="4">
                <el-statistic title="微信结余" :value="getStaticValue(statisticData.studioWalletBalance?.['微信'])"/>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="activeTab=='detail'">
      <el-table :data="tableData"
                style="width: 100%"
                @row-dblclick = "dbClickHandle"
                @cell-dblclick= "cellDbClickHandle"
                border stripe
                height="760px">
        <el-table-column label="序号" width="60" align="center">
          <template #default="{ $index }">
            {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
          </template>
        </el-table-column>
        <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                         :label="column.label"
                         :width="column.width" :align="column.align"></el-table-column>
      </el-table>
    </div>
    <DetailModel ref="detailRef"></DetailModel>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import request from '@/config/axios'
import DetailModel from './DetailModel.vue'

const filter = ref({
  agencyId: ''
});

const detailRef = ref();
const tableData = ref([]);
const statisticData = ref({})

const columns = ref([
  {prop: 'agentName', label: '合作编号', width: '60', align: 'center'},
  {prop: 'totalIncome', label: '总收入', width: '80', align: 'center'},
  {prop: 'totalExpense', label: '总支出', width: '100', align: 'center'},
  {prop: 'profit', label: '总利润', width: '100', align: 'center'},
  {prop: 'wxChatIncome', label: '微信收入', width: '100', align: 'center'},
  {prop: 'm1Income', label: '铭扬码1收入', width: '110', align: 'center'},
  {prop: 'm2Income', label: '铭扬码2收入', width: '110', align: 'center'},
  {prop: 'm3Income', label: '对公账户收入', width: '110', align: 'center'},
  {prop: 'wxChatExpenditure', label: '微信支出', width: '86', align: 'center'},

  {prop: 'managedIncome', label: '托管利润', width: '86', align: 'center'},
  {prop: 'newlyConnected', label: '托管新接利润', width: '120', align: 'center'},
  {prop: 'renew', label: '托管续费利润', width: '120', align: 'center'},
  {prop: 'negotiateIncome', label: '协商利润', width: '86', align: 'center'},
  {prop: 'thawIncome', label: '解冻利润', width: '86', align: 'center'},
  {prop: 'otherIncome', label: '其他利润', width: '86', align: 'center'},
]);
const activeTab = ref('total')


const fetchData = async function () {
  const response = await request.post({
    url: '/statistics/payDetailStatisticsAll',
    data: filter.value
  })
  //数据格式转换
  statisticData.value = {
    "totalIncome": response?.totalIncome,
    "totalExpenditure": response?.totalExpenditure,
    "totalProfit": response?.totalProfit,
    "totalIncomeMap": response?.totalIncomeMap || {},
    "totalExpenditureMap": response?.totalExpenditureMap || {},
    "walletBalance": response?.walletBalance || {},
    "totalBusinessIncome": response?.totalBusinessIncome,
    "totalBusinessExpenditure": response?.totalBusinessExpenditure,
    "totalBusinessProfit": response?.totalBusinessProfit,
    "businessTotalIncomeMap": response?.businessTotalIncomeMap || {},
    "businessTotalExpenditureMap": response?.businessTotalExpenditureMap || {},
    "businessWalletBalance": response?.businessWalletBalance || {},
    "totalStudioIncome": response?.totalStudioIncome,
    "totalStudioExpenditure": response?.totalStudioExpenditure,
    "totalStudioProfit": response?.totalStudioProfit,
    "studioTotalIncomeMap": response?.studioTotalIncomeMap || {},
    "studioTotalExpenditureMap": response?.studioTotalExpenditureMap || {},
    "studioWalletBalance": response?.studioWalletBalance || {}
    // "totalIncomeMap":response?.data.businessTotalExpenditureMap,

  }
  tableData.value = response?.orderAgentPayDetailVos.map((item) => {
    return {
      "agentName": item.agentName,
      "totalIncome": item.totalIncome,
      "totalExpense": item.totalExpense,
      "profit": item.profit,
      "wxChatIncome": item.incomeWayMap["微信"],
      "m1Income": item.incomeWayMap["铭扬码1"],
      "m2Income": item.incomeWayMap["铭扬码2"],
      "m3Income": item.incomeWayMap["对公账户"],
      "wxChatExpenditure": item.expenditureWayMap["微信"],
      "managedIncome": item.businessProfitMap["托管"],
      "newlyConnected": item.transactionTypeMap["新接"],
      "renew": item.transactionTypeMap["续费"],
      "negotiateIncome": item.businessProfitMap["协商"],
    }
  });
}

const getStaticValue = function (value) {
  if (value) {
    return value
  } else {
    return "0"
  }
}

const cellDbClickHandle = function (row, column, cell, event) {
  console.log('-----cell触发了column------', column.property)
  const type = column.property
  if (type === 'wxChatIncome') {
    filter.value.payWay = "微信"
    detailRef.value?.open(row, filter.value)
  } else if (type === 'm1Income') {
    filter.value.payWay = "铭扬码1"
    detailRef.value?.open(row, filter.value)
  } else if (type === 'm2Income') {
    filter.value.payWay = "铭扬码2"
    detailRef.value?.open(row, filter.value)
  } else if (type === 'm3Income') {
    filter.value.payWay = "铭扬码3"
    detailRef.value?.open(row, filter.value)
  }else{
    filter.value.payWay = ""
    detailRef.value?.open(row, filter.value)
  }
}


onActivated(() => {
  fetchData()
})

// onMounted(() => {
//   password.value = ''
// });
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section > * {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}

.drawer-footer {
  text-align: right;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
}

.form-inline .el-form-item {
  margin-right: 20px;
}

.password-panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 根据需要调整高度，这里使用了视口高度 */
}

</style>
